<template>
<div style="padding: 10px 20px;height: auto; ">
    <h1 style="font-size: 24px;">添加工作流</h1>
    <div style="width: 50%;height: 100vh;margin: auto;">
        <el-card v-for="(item, index) in inputSets" :key="index" class="box-card">
            <div class="box-card-header">
                <span class="title">字段名称：</span>
                <el-input class="input" v-model="item.name" placeholder="请输入"></el-input>
            </div>
            <div class="box-card-header">
                <span class="title">字段类型：</span>
                <el-select class="input" v-model="item.type" placeholder="请选择字段类型">
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="时间" value="date"></el-option>
                    <el-option label="数字" value="number"></el-option>
                    <el-option label="布尔值" value="boolean"></el-option>
                </el-select>
            </div>
            <div class="box-card-header">
                <span class="title">描述：</span>
                <el-input class="input" v-model="item.description" placeholder="请输入"></el-input>
            </div>
        </el-card>
        <el-button @click="addInputSet">+</el-button>
        <el-button @click="deleteInputSet">-</el-button>
        <el-button @click="submitData">提交</el-button>
    </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
const router=useRouter()
import http from "../../http"

let workname= route.query.name
let workstatus = route.query.status
let data = ref([])

let inputSets = ref([{ name: '', type: '' , description: ''}]); // 定义一个数组来存储输入集
// 添加字段
const addInputSet = () => {
    inputSets.value.push({ name: '', type: '' , description: ''});
}
// 删除字段
const deleteInputSet = () => {
  if (inputSets.value.length > 1) { // 检查是否多于一个字段
    inputSets.value.pop(); // 删除最后一个字段
  } else {
    ElMessage.error('至少保留一个字段');
  }
};
// 提交数据的方法，将所有字段名和字段类型组装成JSON
// 提交数据的方法，将所有字段名和字段类型组装成JSON
const submitData = () => {
    const dataToSubmit = inputSets.value.map(item => ({
    name: item.name,
    type: item.type,
    description: item.description
    }));
let workname= localStorage.getItem("workflow_name")
let workstatus = localStorage.getItem("workflow_status")
let flag = ref(true)
// 检查输入框是否为空
    for (let i = 0; i < inputSets.value.length; i++) {
        if (!inputSets.value[i].name || !inputSets.value[i].type || !inputSets.value[i].description) {
            ElMessage.error('请填写完整信息');
            flag.value = false
            break;
        } else {
            flag.value = true
        }
    }
    console.log(flag.value)
    if (flag.value == true){
        data = JSON.stringify(dataToSubmit)
            console.log(workname)
            console.log(workstatus)
            console.log(data);
            // 这里可以将JSON.stringify(dataToSubmit) 的结果发送到后端等操作
            http.post('/app/workflow/',{name:workname,params:data, status:workstatus})
            .then(res => {
                console.log(res)
                if (res.status === 201){
                    ElMessage.success('添加成功');
                    router.push("/workflow_role")
                }
            })
            .catch(err=>{
                ElMessage.error("工作流已存在，添加失败")
                router.push("/addworkflow")
            })
    }
}
</script>

<style scoped>
.box-card {
    width: 600px;
    margin-bottom: 20px;
 }
.box-card-header{
    display: flex;
    margin-bottom: 10px;
}
.input{
    width: 400px;
}
.title{
    width: 100px;
}
</style>